<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>天猫超市</title>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/item.js"></script>
<style>
#item img {
	width: 550px;
}
</style>

</head>
<body>
	<!-- 利用forwardUrl来确定(注册之后)返回的url -->
	<%
		request.setAttribute("forwardUrl", "/index.jsp"); //map
	%>

	<!-- 网页头部 -->
	<jsp:include page="/jspfragments/header.jsp" />

	<!-- 网页正文 -->
	<br />

	<div class="container">
		<div class="row" style="background-color: white; box-shadow: 10px 10px 5px rgb(79,92,169);">
			<!-- 左侧菜单栏 -->
			<div class="col-md-6" id="item" style="margin-right: -172px">
				<br /><br /><br />
				<img style="width: 70%" src="${pageContext.request.contextPath}${item.imageUrl}">
			</div>
			<!-- 右侧主体 -->
			<div class="col-md-6">
				<br /><br /><br />
				<div class="panel" style="background-color: #fff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);border-radius: 30px">
					<div style="background-color: white;">
						<font size="3">
					</div>
					<div class="panel-body">
						<font size="8"><strong>${item.name}</strong></font>&nbsp;&nbsp;&nbsp;&nbsp;<font
							size="5"><strong>${item.type}</strong></font>&nbsp;&nbsp;&nbsp;&nbsp;<font
							size="4"><strong><span
								class="glyphicon glyphicon-usd"  style="color: rgb(23,41,145)">${item.price}</span></strong></font><br /> <br />
						<br /> <font size="4"><p style="text-align: center">${item.description}</p></font> <br /> <br />

						<c:if test="${empty sessionScope.user}">
						<c:if test="${empty sessionScope.admin}">
								<center>
									<font size="5" style="width: 50%"><strong>如需购买，请先登录</strong></font><br />
									<button type="submit" class="btn"
										data-toggle="modal" data-target="#login" style="width: 50%;color: rgb(23,41,145)">
											<span class="glyphicon"></span>&nbsp;登&nbsp;&nbsp;录
									</button>
								</center>
						</c:if>
						</c:if>

						<c:if test="${not empty sessionScope.user}">
							<form action="${pageContext.request.contextPath}/servlet/addShoppingcartItemServlet" method="post">
								<div class="form-group has-feedback" style="text-align: right">
									<label for="item-number"><font size="4">购买数量(库存量：${item.stock})</font></label>
									<div class="input-group" style="width: 30%;margin-left: 366px">
										<span class="input-group-btn">
											<button class="btn" onclick="decreaseItemNum()"
												type="button">-</button>
										</span> <input id="item-number" name="number" type="text"
											class="form-control" value="1" style="text-align: center;padding: 0px">
										<span class="input-group-btn">
											<button class="btn"
												onclick="increaseItemNum(${item.stock})" type="button">+</button>
										</span>
									</div>
									<br /> <input type="hidden" name="itemId"
										value="${item.itemId}"><input type="hidden"
										name="userId" value="${user.userId}">
									<button type="submit"
										style="width: 30%;border: 0px">加入购物车</button>
								</div>
							</form>
						</c:if>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
	<div>
		<div class="container">
			<div style="text-align:center">
				<br/> <br/> <br/><br/><br/><font size="20"><strong>Tain Mao</strong></font>
				<br/><br/><br/>
				<br/> <font size="5"><strong>创造幸运时刻，激发美好生活热望</strong></font> <br/> <br/>
				<br/>
			</div>
		</div>
	</div>


	<!-- 操作成功弹框 -->
	<div id="operate-success" class="modal fade" >
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<button class="close" data-dismiss="modal">
					</button>
				</div>

				<div class="modal-title">
					<h1 class="text-center">操作成功</h1>
				</div>

				<!-- 主体 -->
				<div class="modal-body">
					<center>
						<button class="btn"  style="color: rgb(79,92,169)" type="submit" data-dismiss="modal">确&nbsp;&nbsp;定</button>
					</center>
				</div>
			</div>
		</div>
	</div>

	<!-- 操作成功后提示 -->
	<c:if test="${not empty operateSuccess}">
		<script>
			$('#operate-success').modal("show");
		</script>
	</c:if>

	<!-- 操作失败弹框 -->
	<div id="operate-error" class="modal fade" >
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<button class="close" data-dismiss="modal">
						<span>&times;</span>
					</button>
				</div>

				<div class="modal-title">
					<h1 class="text-center">操作失败</h1>
				</div>

				<!-- 主体 -->
				<div class="modal-body">
					<center>
						<button class="btn"  style="color: rgb(79,92,169)" type="submit" data-dismiss="modal">确&nbsp;&nbsp;定</button>
					</center>
				</div>
			</div>
		</div>
	</div>

	<!-- 操作失败后提示 -->
	<c:if test="${not empty operateError}">
		<script>
			$('#operate-error').modal("show");
		</script>
	</c:if>



</body>
</html>